<template>
    <div class="container">
        <div id="question" @click="edit">
            <div class="tittle"><span id="bixuan">* </span>{{tittle}}</div>
            <div class="block">
                <el-rate
                    v-model="value"
                    :colors="colors"
                    :texts="texts"
                    show-text>
                </el-rate>
            </div>
        </div>
        <el-divider/>
        <div id="set">
            <div style="margin-top: 10px; font-weight: bold"><i class="el-icon-s-tools"></i> 标题设置：</div>
            <el-input 
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                v-model="tittle" 
                placeholder="请输入标题"
                style="margin-top: 10px; width: 400px">
            </el-input>
            <br>
            <el-checkbox v-model="checked" style="margin-top: 10px">必选</el-checkbox><br>
            <div style="margin-top: 15px">
                <span style="padding-top: 10px; font-weight: bold"><i class="el-icon-s-tools"></i> 自定义辅助文字</span>
                <span style="padding-top: 10px; font-weight: bold; margin-left: 35%"><i class="el-icon-s-tools"></i> 分数设置</span>
            </div>
            <el-input v-model="texts[0]" size="small" class="optionSet"><template slot="prepend">1星</template></el-input>
            <el-input v-model="valueSet[0]" class="score" size="small" ></el-input>
            <el-input v-model="texts[1]" size="small" class="optionSet"><template slot="prepend">2星</template></el-input>
            <el-input v-model="valueSet[1]" class="score" size="small" ></el-input>
            <el-input v-model="texts[2]" size="small" class="optionSet"><template slot="prepend">3星</template></el-input>
            <el-input v-model="valueSet[2]" class="score" size="small" ></el-input>
            <el-input v-model="texts[3]" size="small" class="optionSet"><template slot="prepend">4星</template></el-input>
            <el-input v-model="valueSet[3]" class="score" size="small" ></el-input>
            <el-input v-model="texts[4]" size="small" class="optionSet"><template slot="prepend">5星</template></el-input>
            <el-input v-model="valueSet[4]" class="score" size="small" ></el-input>
        </div>
    </div>
</template>

<script>
export default ({
    data() {
        return {
            tittle: '标题',
            value: null,
            checked: false,
            texts: ['极差', '失望', '一般', '满意', '惊喜'],
            valueSet: [1, 2, 3, 4, 5]
        }
    },
    methods: {
        sendMsg() {
            let question = {};
            question.tittle = this.tittle;
            question.checkecd = this.checked;
            question.texts = this.texts;
            question.valueSet = this.valueSet;
            this.$emit('getRateMsg', question);
        },
        edit() {
            let e = document.getElementById('set');
            let q = document.getElementById('question');
            console.log(q);
            if (e.style.display == 'none') {
                e.style.display = 'block';
                q.style.borderWidth = '2px';
            } else {
                e.style.display = 'none';
                q.style.borderWidth = '0px';
            }
        }
    },
    watch: {
        // eslint-disable-next-line no-unused-vars
        checked(val, oldval) {
            let e = document.getElementById('bixuan');
            if (val == true) {
                e.style.display = 'inline';
            } else {
                e.style.display = 'none';
            }
        }
    }
})
</script>

<style scoped>
.container {
    width: 400px;
    justify-content: space-between;
    font-size: 15px;
    text-align: left;
    margin-top: 20px;
}
.tittle {
    font-weight: bold;
    font-size: 16px;
}
.block {
    padding-top: 20px
}
#question {
    border-style: dashed;
    border-width: 2px;
    padding: 10px 0 10px 10px;
    border-radius: 5px;
    display: block;
    cursor: pointer;
}
.optionSet {
    margin-top: 10px;
    width: 60%
}
.score {
    float: right;
    width: 100px;
    margin-top: 10px;
    margin-right: 35px;
}
#bixuan {
    display: none;
    color: red;
}
</style>